import { useAuth } from '@/contexts/AuthContext';
import { Separator } from '@/components/ui/separator';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { toast } from '@/hooks/use-toast';

export default function HomePage() {
  const { user } = useAuth();

  return (
    <>
      <header className='h-[10vh] my-2 mx-4 flex justify-between items-center'>
        <h1 className='font-bold text-3xl'>{user?.username}</h1>
        <div className='flex items-center gap-4'>
          <Avatar>
            <AvatarImage src='https://github.com/shadcn.png' alt='@wx' />
            <AvatarFallback>WX</AvatarFallback>
          </Avatar>
          <h3>微信用户</h3>
        </div>
      </header>
      <Separator />
      <main className='h-[80vh] flex justify-center items-center'>
        <Button
          onClick={() => {
            toast({ title: '开发中' });
          }}
        >
          退出登录
        </Button>
      </main>
    </>
  );
}
